<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>选座购票</title>
    <link rel="stylesheet" th:href="@{/css/semantic.min.css}">
    <link rel="stylesheet" th:href="@{/css/me.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
    <script type="text/javascript" th:src="@{/js/message.js}"></script>
</head>
<body>
<div class="ui  top fixed">
    <div class="ui  secondary  pointing borderless massive menu">
        <div class=" header item logo">
            <a href="#"><img th:src="@{/image/logo.png}" alt="logo"></a>
        </div>
        <a th:href="@{/}" class=" item nav-item">
            首页
        </a>
        <a th:href="@{/movieList}" class="item nav-item">
            影片
        </a>
        <a th:href="@{/cinemaList}" class="active  my-color item nav-item">
            影院
        </a>
        <div class='right menu' th:if="${session.user}==null">
            <a th:href='@{/login}' class='item nav-item'>登录</a>
            <a th:href='@{/register}' class='item right-nav-item'>注册</a>
        </div>

        <div class="right menu" th:unless="${session.user}==null">

            <a th:href='@{/user/personalOrder}' class='item right-nav-item'>欢迎,<span th:text="${session.user.username}"></span>用户</a>
            <a th:href='@{/user/logout}' class='item right-nav-item'>退出</a>
        </div>
    </div>
</div>
<div class=" ui seat_step container">
    <input type="hidden" th:value="${time.id}" id="timeId_input">
    <ul>
        <li class="down">1.选择影片，场次</li>
        <li class="current">2.选座，填手机号</li>
        <li class="future">3.确认订单，支付</li>
        <li class="future">4.支付成功，影院取票观影</li>
    </ul>
</div>
<div class="ui grid container">
    <div class="ten wide column segment_border">
        <div class="label_pm">
            屏幕
        </div>
        <div class="ui sixteen column grid">

            <div th:each="column,stat:${seats}" class="row">
                <a class='column'><div style="height: 25px"><div class='seat_px' th:text="${stat.count}"></div></div></a>

                <a th:each="seat,iterStat:${column}">
                    <input type="hidden" th:value="${column}" th:id="${stat.count}">
                    <a th:if="${seat}=='a'" class='column seat' th:onclick='buyTicket([[${stat.count}]],[[${iterStat.index}]],this)'></a>

                    <a th:if="${seat}=='b'" class='column sold'></a>

                    <a th:if="${seat}=='_'"class='column corridor'></a>
                </a>

            </div>

        </div>
        <div class="ui divider"></div>
        <div class="segment">
            <div class="seat_bottom">
                <span><img th:src="@{/image/seat1.png}"></span>可选座位
            </div>
            <div class="seat_bottom">
                <span><img th:src="@{/image/seat_checked.png}"></span>已选座位
            </div>
            <div class="seat_bottom">
                <span><img th:src="@{/image/seat_sold.png}"></span>不可选座位
            </div>
        </div>
    </div>
    <div class="six wide column bg_color_red_thin">
        <div class="row">
            <div class="ui grid">
                <div class="five wide column">
                    <img width="90" height="120" th:src="@{${film.picture}}">
                </div>
                <div class="eleven wide column">
                    <div class="row add_mini_margin_top" th:text="${film.name}">
                    </div>
                    <div class="row add_mini_margin_top">
                        版本：原语3D
                    </div>
                    <div class="row add_mini_margin_top">
                        片长：<span th:text="${film.length}"></span>分钟
                    </div>
                </div>
            </div>
        </div>
        <div class="row add_medium_margin">
            <label class="label_title">影院：</label><strong th:text="${cinema.name}"></strong>
        </div>
        <div class="row add_medium_margin">
            <label class="label_title">影厅：</label><strong th:text="${hall.name}"></strong>
        </div>
        <div class="row add_medium_margin">
            <label class="label_title">场次：</label>
            <font style="color: red;" th:text="${#dates.format(time.date,'MM月dd日')}"></font>
            <font style="color: red;" th:text="${#dates.format(time.time,'HH:mm')}">
            </font>
        </div>
        <div class="row add_medium_margin">
            <label class="label_title">座位：</label><font id="select_seat" style="color: red;">还未选择座位</font>
            <ul id="seats_chose">

            </ul>
            <div class="add_mini_margin_top">
                已选择<span id="tickets_num">0</span>个座位，再次点击座位可以取消
            </div>
        </div>
        <div class="ui divider"></div>
        <div class="row">
            <label class="label_title">原价：</label>
            <font>￥<span th:text="${time.price}"></span></font>
            <input type="hidden" th:value="${time.price}" id="price_input">
        </div>
        <div class="row add_medium_margin">
            <label class="label_title">总计：￥<span style="color: red;" id="total_price">0</span></label>
        </div>
        <div class="ui divider"></div>
        <div class="row">
            接收电子码的手机号(11位)
        </div>
        <div class="row add_medium_margin">
            <input type="text" class="phone" th:value="${session.user.telephone}">
        </div>
        <div class="row add_medium_margin">
            <button class="verify_sub" onclick="buy()">确认信息，下单</button>
        </div>
    </div>
</div>
<div class="ui grid container seat_foot">
    <div class="eight wide column add_right_border">
        <div class="row">
            <strong>特别提示：</strong>
        </div>
        <div class="row">
            1、下单前请仔细核对影片、影院、场次、手机号等信息。
        </div>
        <div class="row">
            2、下单后请于15分钟内完成支付，超时系统将不保留座位。
        </div>
        <div class="row">
            3、每笔订单最多可以选择4个座位，请选择连续的座位。
        </div>
        <div class="row">
            4、电影票售出后暂不支持退换 。
        </div>
    </div>
    <div class="eight wide column">
        <div class="row">
            <strong>代理商信息：</strong>
        </div>
        <div class="row">
            中影国际
        </div>
        <div class="row">
            客服电话： 0571-88157838
        </div>
    </div>
</div>


<script>
    let price=$('#price_input').val();
    let time_id=$('#timeId_input').val();
    let tickets=[];
    let tickets_num = $('#tickets_num'); //票数
    let total_price = $('#total_price'); //票价总额
    function buyTicket(x,_y,e){
        let id="#"+x;
        let arr=$(id).val();
        let array=eval(arr)
        let y=0;
        for (let i=0;i<=_y;i++){
            if (array[i]=="a"||array[i]=="b"){
              y=y+1;
          }
        }
        let bool=$(e).hasClass('seat');
        if(bool){
            if(tickets.length<4){
                $(e).removeClass("seat")
                $(e).addClass("checked")
                if (!$('#select_seat').hasClass("hide")){
                    $('#select_seat').addClass("hide")
                }
                let element="<li id='"+x+y+"'>"+x+"排"+y+"座</li>";
                $('#seats_chose').append(element)
                let _x=x-1;
                let seat={x:x,y:y,_x:_x,_y:_y};
                tickets.push(seat)
                tickets_num.text(tickets.length)
                total_price.text(getTotalPrice())
            }else {
                $.message({
                    duration:'2000',
                    type:'error',
                    message:'最多选择4个座位'
                })
            }
        }else {
            $(e).removeClass("checked")
            $(e).addClass("seat")
            let _x=x-1;
            let seat={x:x,y:y,_x:_x,_y:_y};
            for(let i=0; i<tickets.length; i++){
                if(tickets[i].x === seat.x&&tickets[i].y === seat.y){
                    tickets.splice(i,1);
                    let sx="#"+seat.x+seat.y;
                    $(sx).remove()
                    tickets_num.text(tickets.length)
                    total_price.text(getTotalPrice())
                }
            }
            if (tickets.length==0){
                $('#select_seat').removeClass("hide")
            }

        }
    }

    function getTotalPrice() {
        return (Number(price)*Number(tickets.length)).toFixed(2)
    }

    function buy() {

        let telephone=$('.phone').val();
        if(telephone==''){
            $.message({
                message:'手机号不能为空!',
                type:'warning',
                duration:'2000',
                showClose:true,
            });
            return this;
        }else{
            let pre=/^[1][358][0-9]{9}$/;
            if(!pre.test(telephone)){
                $.message({
                    message:'手机号码格式有误！',
                    type:'warning',
                    duration:'2000',
                    showClose:true,
                })
                return this;
            }
        }

        if (tickets.length===0){
            $.message({
                message:"您还没有选座",
                duration:'2000',
                type:'error'
            })
            return ;
        }
        $.ajax({
            url:'http://localhost:8080/user/verifyOrder',
            method:'post',
            contentType: 'application/json;charset=utf-8',
            data:JSON.stringify({id:time_id,phone:telephone,seats:tickets}),
            dataType:'json',
            success:function (res) {
                if (res.code==200){
                    $.message({
                        message:"购票成功",
                        duration:'1000',
                        type:'success'
                    })
                    setTimeout(function () {
                        window.location.href="http://localhost:8080/user/order/"+res.data;
                    },1000)
                }
                if (res.code==400){
                    $.message({
                        message:res.data,
                        duration:'2000',
                        type:'error'
                    })
                    setTimeout(function () {
                        window.location.reload();
                    },2000)
                }
                if (res.code==201){
                    $.message({
                        message:res.data,
                        duration:'2000',
                        type:'error'
                    })
                }
            }
        })
    }


</script>

</body>
</html>